<template>
  <label @click="clickRadio" class="ivu-radio-wrapper ivu-radio-default" :class="{ 'ivu-radio-wrapper-checked': isChecked }">
    <span class="ivu-radio" :class="{ 'ivu-radio-checked': isChecked }">
      <span class="ivu-radio-inner"></span>
      <input @click.stop type="radio" class="ivu-radio-input" style="z-index: -1">
    </span>
    {{ title }}
  </label>
</template>

<script>
export default {
  name: 'cancel-radio',
  props: {
    title: String,
    checked: Boolean
  },
  data () {
    return {
      isChecked: false
    }
  },
  mounted () {
    this.isChecked = this.checked
  },
  methods: {
    clickRadio () {
      this.isChecked = !this.isChecked
      this.$emit('on-change', this.isChecked)
    }
  }
}
</script>
